<template>
	<view class="content">
		<view class="date_box">
			<view class="date_change">
				<custom-year-month-selector ref="selector" @change="dateChange"></custom-year-month-selector>
				<!-- <image class="down_icon" src="/static/images/down.png" mode="scaleToFill"></image> -->
			</view>
		</view>
		<view class="history_list">
			<view class="history_item" v-for="(item, index) in historyList" :key="index"  @click="jumpToDetail(item)">
				<custom-card>
					<view class="history_header">
						<view class="history_type">
							<text>{{item.fileName}}</text>
						</view>
						<view class="history_result" :class="item.payStatus == 10 || item.payStatus == 30?'appling':item.payStatus == 20?'agree':'not_agree'">
							<text>{{item.payStatus == 10?'未付款':item.payStatus == 20?'已支付':item.payStatus == 30?'支付失败':'已退款'}}</text>
						</view>
					</view>
					<!-- <view class="history_start_and">
						{{item.leaveStartTime}} 至 {{item.leaveEndTime}}&nbsp;&nbsp; {{item.leaveDay}}天
					</view> -->
					<view class="history_row">
						<view class="history_msg">
							<view class="history_date">
								订单号：{{item.orderNo}} 
							</view>
							<view class="history_date">
								订单时间：{{item.createTime}} 
							</view>
						</view>
						<view v-if="item.payStatus == 20" class="history_pay">
							<span>- {{ item.amount }}</span> 元
						</view>
					</view>
				</custom-card>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		printOrderList
	} from '../../../common/api/index.js';
	import customYearMonthSelector from '@/components/custom-year-month-selector/custom-year-month-selector'
	import {
		_showLoading,
		_showToast,
		dateFtt,
		mGetDate
	} from '../../../common/js/util.js'
	export default {
		components: {
			customYearMonthSelector
		},
		data() {
			return {
				orgId: null,
				empId: null,
				dateValue: {},
				scrollTop: 0,
				height: 0,
				historyList: [],
			}
		},
		onShow() {
			this._getHistoryList()
		},
		onLoad(option) {
			this.orgId = option.orgId
			this.empId = option.empId
			//TODO:修改兼容性，不使用$refs
			let value = this.getDate().split('-');
			this.dateValue = {
				value,
				sAndeforTime: [dateFtt('yyyy-MM-dd', value[0] + '-' + value[1] + '-01')+' 00:00:00',dateFtt('yyyy-MM-dd', value[0] + '-' + value[1] + '-'+ mGetDate(value[0], value[1])) +' 23:59:59'],
			}
		},
		methods: {
			jumpToDetail(item) {
				uni.navigateTo({
					url: './detail?detail='+encodeURIComponent(JSON.stringify(item).replace(/<[^>]+>/g,""))
				})
			},
			dateChange(e) {
				this.dateValue = e
				this._getHistoryList()
			},
			_getHistoryList(){
				this.historyList = []
				printOrderList({
					orgId: this.orgId,
					empId: this.empId,
					startDate: this.dateValue.sAndeforTime[0],
					endDate: this.dateValue.sAndeforTime[1],
				  }).then(res => {
					if (res.code == 0) {
						this.historyList = res.data
					}
				})
			},
			getDate(type) {
			    const date = new Date();
			    let year = date.getFullYear();
			    let month = date.getMonth() + 1;
			    month = month > 9 ? month : '0' + month;;
			    return `${year}-${month}`;
			}
		}
	}
</script>

<style lang="scss">
	page{
		height: 100vh;
		background-color: #f6f6f6;
		font-family: PingFang-SC-Heavy, PingFang-SC;
	}
	.content{
		height: 100%;
		padding-bottom: 150rpx;
		box-sizing: border-box;
		overflow-y: auto;
		/* padding: 28rpx 32rpx; */
	}
	.btn_box {
		height: 150rpx;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		border-radius: 24rpx 24rpx 0 0;
		background-color: #FFF;
	}
	.btn_pri {
		width: 566rpx;
		height: 96rpx;
		line-height: 96rpx;
		font-weight: 800;
		background: linear-gradient(90deg, #0685FF 0%, #285EFF 100%);
		box-shadow: 0 16rpx 32rpx 0 rgba(36, 98, 255, 0.24);
		border-radius: 9rpx;
	}
	.date_box{
		padding: 32rpx;
	}
	.date_change{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		font-size: 30rpx;
		font-weight: 800;
		color: #3C424F;
		line-height: 42rpx;
	}
	.history_times{
		margin-top: 16rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #6B707A;
		line-height: 40rpx;
	}
	.history_list{
		padding: 0 32rpx;
		.history_item{
			margin-bottom: 20rpx;
		}
	}
	.history_header{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		position: relative;
		
		&::before{
			content: "";
			display: block;
			position: absolute;
			width: 10rpx;
			height: 10rpx;
			border-radius: 50%;
			background-color: #185AFF;
			left: -16rpx;
		}
		.history_type{
			width: calc(100% - 110rpx);
			font-size: 32rpx;
			font-weight: 600;
			color: #3C424F;
			line-height: 44rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.history_result{
			width: 110rpx;
			text-align: right;
			font-size: 28rpx;
			font-weight: 500;
			color: #FA6400;
			line-height: 40rpx;
		}
		.result_icon{
			width: 36rpx;
			height: 36rpx;
			margin-right: 12rpx;
		}
		.history_result.agree{
			color: #55C976;
		}
		.history_result.not_agree{
			color: #E02020;
		}
		.history_result.appling{
			color: #FA6400;
		}
	}
	.history_start_and{
		font-size: 28rpx;
		font-weight: 600;
		color: #6B707A;
		line-height: 40rpx;
		padding: 20rpx 0 30rpx;
	}
	.history_date{
		padding: 20rpx 0 0;
		font-size: 24rpx;
		font-weight: 500;
		color: #9AA2B2;
		line-height: 34rpx;
	}
	.history_row{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.history_msg{
		width: calc(100% - 100rpx);
	}
	.history_pay{
		width: 100rpx;
		font-size: 20rpx;
		color: #999;
		text-align: right;
		span{
			font-size: 36rpx;
			color: #FA6400;
		}
	}
</style>
